<template>
	<div
		style="background-color: #F5F5F5; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);border-radius: 2px;opacity: 0.8;">
		<!-- 抬头 -->
		<el-row style="height: 25px;">
			<el-col :span="24">
				<div class="grid-content bg-purple-dark">
					<h3 class="el-icon-s-grid">
						数据列表
					</h3>
				</div>
			</el-col>
		</el-row>
		<div style="margin: 20px 0;"></div>
		<div style="height: 500px; background-color: #FFFFFF;">
			<div
				style="width: 90%; background-color: #FFFFFF; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); margin: 30px auto;">
				<el-input v-model="querinfo.iname" @clear="select"
					style="margin-top: 20px; margin-left: 20px; width: 300px;" placeholder="请输入查询条件">
					<template slot="prepend">查询条件</template>
				</el-input>
				<el-button style="margin-left: 20px;" @click="select" type="warning">查询</el-button>
				<!-- 下划线 -->
				<el-divider></el-divider>

				<template>
					<el-table :data="adverts" border style="width: 90%; margin: 30px auto;">
						<el-table-column type="index" label="#" width="50">
						</el-table-column>
						<el-table-column prop="iname" label="广告描述" width="400">
						</el-table-column>
						<el-table-column prop="starttime" label="开始时间">
						</el-table-column>
						<el-table-column prop="endtime" label="结束时间">
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="primary" size='mini' @click="delUser(scope.row.adid)"
									icon="el-icon-edit" circle></el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>

				<!-- 分页 -->
				<div class="block" style="width: 20%;">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="querinfo.pagenum" :page-sizes="[1, 2, 3, 4]" :page-size="querinfo.pagesize"
						layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import qs from 'qs'
	export default {
		data() {
			return {
				querinfo: {
					iname: '',
					pagesize: 3,
					pageunm: 3
				},
				adverts: [],
				//获取总条数
				total: 0
			}
		},
		methods: {
			handleSizeChange(newpagesize) {
				this.queryinfo.pagesize = newpagesize;
				this.selectAdvertIsdel();
			},
			handleCurrentChange(newpagenum) {
				this.queryinfo.pagenum = newpagenum;
				this.selectAdvertIsdel();
			},

			//查询所有数据
			async selectAdvertIsdel() {
				this.adverts = [];
				var res = await this.$http.post("selectByStatus", qs.stringify(this.queryinfo))
				// console.log(res)
				if (res.data.code == 200) {
					this.adverts = res.data.data.list
					this.total = res.data.data.total
					console.log(this.total)
				} else {
					this.$message.info(res.data.data.message)
				}
			},
			//改变每页显示的条数
			handleSizeChange(newpagesize) {
				//console.log(newpagesize)
				this.querinfo.pagesize = newpagesize
				this.selectAdvertIsdel()
			},
			//当前页码改变时，触发的函数
			handleCurrentChange(newpagenum) {
				// console.log(newpagenum)
				this.querinfo.pagenum = newpagenum
				this.selectAdvertIsdel()
			},
			//根据用户名模糊查询
			select() {
				this.querinfo.pagenum = 1
				this.selectAdvertIsdel()
			},
			//审核通过
			delUser(adid) {
				this.$confirm('此操作将广告通过审核, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					var res = await this.$http.post("deletetAdvertIsdel?adid=" + adid)
					if (res.data.code == 200) {
						this.$message.success(res.data.message)
						this.selectAdvertIsdel()
					} else {
						this.$message.error(res.data.message)
					}
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已通过'
					});
				});
			}

		},
		mounted() {
			this.selectAdvertIsdel();
		}
	}
</script>

<style scoped="scoped">
</style>
